<template>
	<view class="pb-4 bg-cF6F7FB min-vh-100">
		<catalogue></catalogue>
		<image class="bg-img w-100" :src="`${cosUrl}/bg/banner_solution.png`"></image>
		<bread :textArr="['首页', '行业解决方案']" :cls="['text-c303133', 'bg-cD3D3D3']"></bread>

		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO-->
		<view class="" style="padding-bottom: 150rpx;">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN ||MP-TOUTIAO-->
		<view class="">
		<!-- #endif -->
			<view class="" style="padding-top: 24rpx;">
				<template v-if="list.length">
					<view class="list " v-for="v,i in list" :key="i">
						<view class="bg-white brs-8 position-relative" @tap="jumpGO(`website/solutionDetail?id=${v.id}`)">
							<image :src="v.coverimage" mode="" class="coverimage" style=""></image>
							<view class="item">
								<view class="title">{{v.name}}</view>
								<view class="date_price">
									<view class="date">
										更新于{{ v.updatedate | formatDate }}
									</view>
									<view class="price">
										￥{{ v.price | formatCurrency}}元
									</view>
								</view>
								<view class="summary">
									{{ v.summary }}
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="d-flex  align-items-center flex-column w-100 py-5" v-else>
					<view class="" style="width: 320rpx;height: 320rpx;">
						<image src="../../static/website/empty.png" class="w-100 h-100" mode=""></image>
					</view>
					<view class="text-16px" style="color: #CDD9ED;">暂无解决方案</view>
				</view>
			</view>
		</view>
		<view class="gotop" @click="goTop" v-show="scrollNum>300">
			<image src="@/static/website/back.png" style="width: 140rpx;height: 140rpx;" mode=""></image>
		</view>
	</view>
</template>
<script>
	import {
		http_solutionlistpage,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.shareTitle = '行业解决方案'
			this.shareDesc = '亚克茜的行业解决方案可以帮助客户快速上线产品，价格更实惠，也可以在行业解决方案上进行二次开发'
			this.share5v4Image = `${this.cosUrl}/bg/banner_solution.png`
			this.share1v1Image = `${this.cosUrl}/bg/shareimage_solution_1v1.png`
			http_solutionlistpage()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.list = res.data
					}
				})
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:`/pages/website/solutionDetail?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg-img {
		height: 546rpx;
		vertical-align: middle;
	}

	.item-img {
		height: 460rpx;
		vertical-align: middle;
	}
	.line{
		height: .5px;
		flex: 1;
		background: red;
		background: #909193;
	}
	.list{
		.bg-white{
			background: #fff;
		}
		padding: 0 24rpx 32rpx;
		border-radius: 16rpx;
		.remen {
			position: absolute;
			top: 0;
			right: 44rpx;
			width: 46rpx;
			height:88rpx;
		}
		.coverimage {
			width: 100%;
			height: 396rpx;
			border-radius: 16rpx 16rpx 0px 0px;
		}
		.item {
			padding: 24rpx 32rpx;
			.title{
				font-weight: 500;
				font-size: 36rpx;
				color: #303133;
				line-height: 50rpx;
			}
			.date_price {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;
				.date {
					font-weight: 300;
					font-size: 28rpx;
					line-height: 40rpx;	
					color: #909193;
				}
				.price {
					font-weight: 500;
					font-size: 32rpx;
					line-height: 44rpx;
					color: #40C6A1;
				}
			}
			.summary {
				font-weight: 400;
				font-size: 32rpx;
				line-height: 52rpx;	
				color: #606266;
				margin-top: 40rpx;
			}
		}
	
	}
</style>
